import React, { Component } from "react";
import { withRouter } from "react-router-dom";
import { contactUs } from "../../api";
import "./index.less";

const contactsMock = [
  { work: "会场支持", name: "张三", phoneNumber: "188 7766 5544" },
  { work: "用餐及住宿支持", name: "张山", phoneNumber: "188 7766 5544" },
  { work: "议程事项支持", name: "张仨", phoneNumber: "188 7766 5544" },
  { work: "总协调支持", name: "张闪", phoneNumber: "188 7766 5544" },
];

@withRouter
export default class ContactUs extends Component {
  state = {
    userInfo: null,
    contacts: contactsMock,
  };

  constructor(props) {
    super(props);
  }

  loadContactUs() {
    contactUs(this.props.match.params.id).then((result) => {
      console.log(result);
      if (result.ret == 200) {
        // this.setState({
        //   contact: result.data,
        // });
      }
    });
  }

  componentDidMount() {
    document.title = "联系我们";
    this.loadContactUs();
  }

  render() {
    return (
      <div className="contact-us">
        <div className="title">会务组服务分工</div>
        <div className="group">
          {this.state.contacts.map((contact) => (
            <div className="item" key={contact.work}>
              <div className="title">{contact.work}</div>
              <div className="content">
                <div className="name">{contact.name}</div>
                <div className="phoneNumber">{contact.phoneNumber}</div>
              </div>
            </div>
          ))}
        </div>
      </div>
    );
  }
}
